<template>
  <div id="blogs" :style="'background: url(' + bgImg + ')  no-repeat center'">
      <NavBar class="nav-bar"/>
      <header-inner class="header-inner"/>
      <side-bar-inner class="side-bar-inner"/>
<!--      <div class="container" ref="container" @scroll="getScroll">-->
      <div class="container" ref="container">
        <blog-list class="blog-list" :limit="limit" @changeLimit="changeLimit"/>
      </div>

<!--      <el-button class="test" @click="test">测试</el-button>-->
  </div>
</template>

<script>
import BlogList from "@/components/blog/blogs/BlogList";
import NavBar from "@/components/blog/blogs/NavBar";
import HeaderInner from "@/components/blog/blogs/HeaderInner";
import SideBarInner from "@/components/blog/blogs/SideBarInner";

import bgImg from "@/assets/background/明日方舟-情人节.jpg"

import {dataTest, mapTest} from "@/network/testRequest";

export default {
  name: "Blogs",
  components: {
    SideBarInner,
    HeaderInner,
    BlogList,
    NavBar
  },
  data() {
    return {
      bgImg,
      limit: 5,
      testData: {
        name: "莱特雷",
        age: 18
      }
    }
  },
  methods: {
    changeLimit(limit) {
      if(limit === 0) {
        this.limit = 5
      }else {
        this.limit = limit;
      }
    },
    // ,
    // getScroll(event) {
    //   console.log(this.$refs.container.scrollTop)
    // }
    test() {
      let formData = new FormData();
      formData.append("name", "莱特雷")
      formData.append("age", "18")
      formData.append("nums", ["1", "2", "3"])
      dataTest(formData).then(res => {
        console.log(res)
      })
      // let formData = new FormData();
      // formData.append("map", {"name":"莱特雷", "age":"18"})

      // mapTest({name:"莱特雷", age:"18"}).then(res => {
      //   console.log(res)
      // })
    }
  }
}
</script>

<style scoped>
  #blogs {
    overflow: auto;
    background-color: #eeeeee;
    height: 100%;
    /*padding-bottom: 90px;*/
  }

  #blogs .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
  }

  #blogs .header-inner {
    z-index: 1;
    position: absolute;
    top: 5%;
    right: 71%;
    width: 12%;
    margin-top: 10px;
  }

  #blogs .side-bar-inner {
    position: absolute;
    top: 5%;
    right: 71%;
    width: 12%;
    margin-top: 220px;
  }

  #blogs .container {
    overflow: auto;
    position: absolute;
    top: 5%;
    left: 0;
    height: 95%;
    width: 100%;
  }

  .blog-list {
    width: 50%;
    margin-top: 10px;
    margin-left: 30%;
    margin-bottom: 90px;
  }

  /*.test {*/
  /*  z-index: 1;*/
  /*  position: absolute;*/
  /*  top: 75%;*/
  /*  right: 71%;*/
  /*  width: 12%;*/
  /*  margin-top: 10px;*/
  /*}*/
</style>